<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">统计</el-breadcrumb-item>
      <el-breadcrumb-item>搜索统计</el-breadcrumb-item>
    </el-breadcrumb>

    <el-container>
      <el-header>
        <div style="margin-top: 15px;">
          <span style="text-align: left;float: left">关键词排行</span>
          <el-row style="text-align: right">
             <el-button size="small">导出数据</el-button>
          </el-row>
        </div>
      </el-header>
      <el-main>
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="date"
              label="商品名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="结果"
              width="180">
            </el-table-column>
            <el-table-column
              prop="address"
              label="总搜索">
            </el-table-column>
            <el-table-column
              prop="date"
              label="本月"
              width="180">
            </el-table-column>
            <el-table-column
              prop="date"
              label="本周"
              width="180">
            </el-table-column>
            <el-table-column
              prop="date"
              label="今日"
              width="180">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
           <!-- 显示分页 -->
          <div class="block" style="text-align: right;margin-right: 30px">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="pagesizes"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [],
      // 第几页
      page: 1,
      // 页大小
      pagesize: 0,
      pagesizes: [5,10,20,50],
      // 总页数
      total: 0
    }
  },
  methods: {
    // 页大小
    handleSizeChange (val) {
      console.log(val)
    },
    // 第几页
    handleCurrentChange (val) {

    }
  },
  created () {

  }
}
</script>

<style>
.el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>